<template>
	<!-- 成品基础库页面 -->
	<a-card :bordered="false">
		<!-- 顶部筛选 -->
		<div class="table-page-search-wrapper">
			<a-form layout="inline" labelAlign="right">
				<a-row :gutter="48">
					<a-col :md="8" :sm="24">
						<a-form-item label="生产单号">
							<a-input v-model="queryParam.orderNumber" placeholder="请输入生产单号" />
						</a-form-item>
					</a-col>
					<a-col :md="8" :sm="24">
						<a-form-item label="选择时间">
							<a-range-picker style="width:100%" v-model="queryParam.timeList" format="YYYY-MM-DD" />
						</a-form-item>
					</a-col>
					<a-col :md="24" :sm="24">
						<span>
							<a-button type="primary" @click="() => { clearSelect(); $refs.table.refresh(true) }">查询</a-button>
							<a-button
								@click="() => { queryParam = { timeList: [] }; clearSelect(); $refs.table.refresh(true) }">重置</a-button>
						</span>
						<span v-if="hasRoleNoAdmin(['general manager', 'caiwu'])">
							<Export text="结存导出" title="结存明细表" url="/emsMaterial/export" :obj="exportParams" />
						</span>
						<span v-if="hasBtnPremission(['emsOrder:cpjckExport'])">
							<Export text="导出" title="导出" url="/emsOrder/cpjckExport" :isBody="true" :obj="{
								...queryParam,
								materialType: this.$businessEnum.MATERIAL_TYPE_ENUM.product.id,  //成品
								orderType: this.$businessEnum.ORDER_TYPE_ENUM.produceOrder.id,
								isOverseasStore: 'N',
								isDeliverCompleted: 0,
								// executeStatus: this.$businessEnum.EXECUTE_STATUS_ENUM.COMPLETED.id,\
								isScRk: 'Y',
								startTime: this.appendTime(this.queryParam.timeList)[0],
								endTime: this.appendTime(this.queryParam.timeList)[1],
							}" />
						</span>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<!-- 表格 -->
		<div style="display: flex;align-items:flex-end;justify-content: space-between;">
			<div class="selectText">
				<span>当前表格已选中 <span class="bold">{{ selectedRows.length }}</span> 项</span>
				<span style="cursor: pointer;" @click="clearSelect">清除</span>
			</div>
		</div>
		<s-table ref="table" size="default" :columns="columns" :data="loadData" :alert="true">
			<span slot="selectBtn" slot-scope="text, record">
				<div class="select-btn" :class="{
					'select-btn__selected': selectedRows.some(item => item.orderId == record.orderId),
				}" @click="handleClickSelectBtn(record)"></div>
			</span>
			<!-- 操作 -->
			<span slot="action" slot-scope="text, record">
				<a @click="$refs.productListForm.init(record)">产品列表</a>
				<a-divider type="vertical" />
				<a @click="$refs.sendInfoForm.init(record)">发货记录</a>
			</span>
		</s-table>
		<!--  产品列表  -->
		<productListForm ref="productListForm" />
		<!--  发货记录  -->
		<sendInfoForm ref="sendInfoForm" />

	</a-card>
</template>

<script>
import { STable } from '@/components'
import { page } from '@/api/modular/main/emsorder/emsOrderManage'
import productListForm from './productListForm'
import sendInfoForm from './sendInfoForm'
import { hasBtnPermission } from '@/utils/permissions';


export default {
	components: {
		STable,
		sendInfoForm,
		productListForm
	},
	data() {
		return {
			queryParam: {},  // 查询参数
			selectedRows: [],  //选中的项
			columns: [
				{
					title: '',
					width: '80px',
					scopedSlots: { customRender: 'selectBtn' }
				},
				{
					title: '序号',
					width: '80px',
					customRender: (text, record, index) => `${index + 1}`
				},
				{
					title: '生产单号',
					dataIndex: 'orderNumber'
				},				
				{
					title: '总箱数',
					dataIndex: 'boxNumber'
				},
				{
					title: '库存箱数',
					dataIndex: 'inventoryBoxNumber',
					// customRender: (text, record, index) =>  record.inStoreBoxNumber - record.deliveredBoxNumber
				},
				{
					title: '归属公司',
					dataIndex: 'targetOrgName'
				},
				{
					title: '录入时间',
					dataIndex: 'firstRkTime'
				},
				{
					title: '操作',
					align: 'center',
					width: '250px',
					scopedSlots: { customRender: 'action' }
				}
			],
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				let query = {
					...this.queryParam,
					...parameter,
					materialType: this.$businessEnum.MATERIAL_TYPE_ENUM.product.id,  //成品
					orderType: this.$businessEnum.ORDER_TYPE_ENUM.produceOrder.id,
					isOverseasStore: 'N',
					isDeliverCompleted: 0,
					// executeStatus: this.$businessEnum.EXECUTE_STATUS_ENUM.COMPLETED.id,\
					isScRk: 'Y',
					startTime: this.appendTime(this.queryParam.timeList)[0],
					endTime: this.appendTime(this.queryParam.timeList)[1],
				}
				delete query.timeList
				return page(query).then((res) => {
					return res.data
				})
			},
			scheduleProductionVisible: false,
			selectedRowKeys: [],
			selectedRows: [],
			defaultExpandedKeys: [],
			replaceFields: {
				key: 'id',
			},
		}
	},
	computed: {
		exportParams() {
			let obj = {
				materialType: this.$businessEnum.MATERIAL_TYPE_ENUM.product.id,
				...this.queryParam,
				isDeliverCompleted: 0,
				orderIds: this.selectedRows && this.selectedRows.length ? this.selectedRows.map(item => item.orderId).join(',') : undefined,
				startTime: this.appendTime(this.queryParam.timeList)[0],
				endTime: this.appendTime(this.queryParam.timeList)[1],
			}
			delete obj.timeList
			return obj
		},
	},
	methods: {
		// 清除选中
		clearSelect() {
			this.selectedRows = []
		},
		// 表格选择按钮点击事件
		handleClickSelectBtn(record) {
			let i = this.selectedRows.findIndex(item => item.orderId == record.orderId)
			if (i == -1) {
				this.selectedRows.push(record)
			} else {
				this.selectedRows.splice(i, 1)
			}
		},
		handleDownload(url) {
			if (!url) {
				return this.$message.error('下载地址为空')
			}
			this.download(url, `${this.title}_${this.dayjs(new Date()).format('YYYY/MM/DD HH:mm:ss')}.xls`).then(res => {
				return this.$message.success('下载成功')
			})
		},
		handleOk() {
			this.$refs.table.refresh()
		},
		onSelectChange(selectedRowKeys, selectedRows) {
			this.selectedRowKeys = selectedRowKeys
			this.selectedRows = selectedRows
		},
	}
}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}
</style>
